<template>
    <div class="table-page">
        <div
            class="table-search-box"
            @keyup.enter="search()"
        >
            <div  class="search-item">
                <label>行业：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.industryId"
                        v-loading="industryFlag"
                        filterable
                        clearable
                        placeholder="请选择行业"
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in industryData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>考试：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.examId"
                        v-loading="examFlag"
                        filterable
                        clearable
                        placeholder="请选择考试"
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in examData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>套餐：</label>
                <el-select
                    v-model="queryData.packageId"
                    placeholder="套餐"
                    clearable
                >
                    <el-option
                        v-for="item in packageData"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"

                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>代理商：</label>
                <el-select
                    v-model="queryData.createdBy"
                    placeholder="创建者"
                    clearable
                >
                    <el-option
                        v-for="item in agentOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>激活码：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.id"
                        clearable
                        placeholder="激活码"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>状态：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.status"
                        filterable
                        clearable
                        placeholder="状态"
                    >
                        <el-option
                            v-for="key in Object.keys(productCodeStatus)"
                            :key="key"
                            :label="productCodeStatus[key].desc"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
<!--            <div class="search-item">-->
<!--                <label>提码时间：</label>-->
<!--                <div class="table-query-input">-->
<!--                    <el-date-picker-->
<!--                        v-model="queryData.createTime"-->
<!--                        type="datetimerange"-->
<!--                        align="right"-->
<!--                        unlink-panels-->
<!--                        range-separator="至"-->
<!--                        start-placeholder="开始日期"-->
<!--                        end-placeholder="结束日期"-->
<!--                        value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                        :picker-options="pickerOptions"-->
<!--                    >-->
<!--                    </el-date-picker>-->
<!--                </div>-->
<!--            </div>-->
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>


        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                >
                </el-table-column>

                <el-table-column
                    prop="id"
                    label="激活码"
                    width="200"
                >
                </el-table-column>
                <el-table-column
                    prop="packageName"
                    label="套餐名"
                    width="120"
                >
                </el-table-column>
                <el-table-column label="行业" min-width="120" prop="industryName">
                </el-table-column>
                <el-table-column label="考试" min-width="120" prop="examName">
                </el-table-column>
                <el-table-column label="套餐" min-width="120" prop="packageName">
                </el-table-column>
                <el-table-column
                    prop="skuName"
                    label="sku名"
                    width="120"
                >
                </el-table-column>

                <el-table-column
                    prop="status"
                    label="状态"
                    min-width="100"
                >
                    <template slot-scope="scope">
                        <k-tag :tag="productCodeStatus[scope.row.status]"></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdByName"
                    label="创建者"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="userName"
                    label="激活用户"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="userTime"
                    label="激活时间"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="260"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">

                        <el-button
                            v-if="scope.row.status==='effective'"
                            class="danger"
                            type="text"
                            icon="el-icon-close"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="refundCode(scope.row)"
                        >退码
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, post, put} from "@/api/request";

export default {
    name: "ProductCode",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: "",
                industryId: null,
                examId: null,
                packageId: null,
                createdBy:null,
                all:true
            },
            examType: null,
            industryData: [],
            examData: [],
            packageData: [],
            industryFlag: false,
            examFlag: false,
            packageFlag: false,
            agentOptions: [],
            industryOptions: [],
            packageOptions: [],
            examOptions: [],
            initAddForm: {
                id: null,
                name: null,
                remark: null
            },
            actions: null,
            addOrUpdateflag: false,
        };
    },
    computed: {
        ...mapState({
            productCodeStatus: state => state.status.productCodeStatus,
        })
    },
    watch: {
        examType(examType) {
            this.queryData.industryId = null;
        },
        "queryData.industryId"(industryId) {
            this.queryData.examId = null;
            if (industryId) {
                this.loadExam(industryId);
            } else {
                this.examData = [];
            }
        },
        "queryData.examId"(examId) {
            this.queryData.packageId = null;
            if (examId) {
                this.loadPackage(examId);
            } else {
                this.packageData = [];
            }
        },
    },
    created() {
        this.loadIndustry();
        this.getAgentOptions()
    },
    methods: {
        getAgentOptions() {
            get("/user/cu/agent/user/u-list", {"size": 1000,first:true}).then(res => {
                this.agentOptions = res.records || res || []
            })
        },
        pickerOptions() {
            return {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            };
        },
        refundCode(data) {
            this.$confirm("确定要退码?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    post(`/order/or/order/agent/refuse`, {
                        id: data.orderId
                    }).then(res => {
                        this.search();
                    }
                    )
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },
        loadPackage(examId, name) {
            this.packageFlag = true;
            return get("/exam/package/list", {
                examId,
                name,
                size: 1000
            })
                .then(res => {
                    this.packageData = res;
                    return this.packageData;
                })
                .finally(() => {
                    this.packageFlag = false;
                });
        },
        loadIndustry() {
            this.industryFlag = true;
            return get("/exam/industry/app/list", {
                size: 1000
            })
                .then(res => {
                    this.industryData = res;
                    return this.industryData;
                })
                .finally(() => {
                    this.industryFlag = false;
                });
        },
        loadExam(industryId, name) {
            this.examFlag = true;
            return get("/exam/exam/list", {
                industryId,
                name,
                size: 1000
            })
                .then(res => {
                    this.examData = res;
                    return this.examData;
                })
                .finally(() => {
                    this.examFlag = false;
                });
        },

        search() {
            this.loadTable("/exam/product/code/page");
        },
    }
};
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 100%;
    //   background: red;
    display: flex;
    flex-direction: column;
}

.action-bar {
    width: 100%;
    height: 60px;
    border-bottom: 1px;
    //   background: pink;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.action-bar-add {
    width: 100px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(170, 129, 136);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-bar-group {
    width: 160px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(158, 120, 126);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-list {
    width: 100%;
    height: 380px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: column;
}

.action-bottom {
    width: 100%;
    height: 60px;
    border-bottom: 1px;
    //   background: rgb(131, 154, 228);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.action-bottom-upload {
    width: 160px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(170, 129, 136);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-list-top {
    width: 100%;
    height: 52px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
}

.action-list-middle {
    width: 100%;
    height: 300px;
    //   border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: column;
}

.action-list-form {
    width: 100%;
    height: 38px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
}

.action-column {
    width: 100%;
    height: 30px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: row;
}

.action-column-item {
    width: 100%;
    height: 50px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    border-top: 1px solid #dfe6ec;
}

.action-check {
    width: 20%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-item {
    width: 14%;
    height: 62%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.form-item-name {
    width: 16%;
    height: 62%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.form-item-progress {
    width: 8%;
    height: 78%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.el-form-item--mini .el-form-item__content {
    line-height: 37px !important;
}

.form-preview-pdf {
    width: 980px;
    height: 780px;
}

.form-preview-img {
    width: 160px;
    height: 160px;
}

.widthImg {
    width: 40%;
    height: 60%;
    display: flex;
    justify-content: center;
}

.widthPdf {
    width: 60%;
    height: 60%;
    display: flex;
    justify-content: center;
}

.update-form-item {
    width: 380px;
    //   margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
}

.update-forms {
    width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    //   justify-content: space-between;
}

.resourceShow {
    width: 60%;
    height: 60%;
}

// 文件预览弹框
.filePreviewDiolog {
    ::v-deep .el-dialog {
        border-radius: 0.5rem;
        min-height: 21rem;

        .el-dialog__header {
            padding-bottom: 5px;
            padding-top: 10px;
            display: flex;
            align-items: center;
            position: relative;

            .el-dialog__headerbtn {
                position: absolute;
                top: 0.583333rem;
            }

            .el-dialog__title {
                font-size: 0.583333rem;
                color: #32353a;
            }
        }

        .el-dialog__body {
            position: relative;
            padding-top: 0.833333rem;
            padding-bottom: 20px;

            .the-divider {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: #e5e8ec;
            }

            .text {
                .middle-text {
                    margin-top: 1.25rem;
                    margin-bottom: 0.416667rem;
                }

                .light-text {
                    i {
                        font-size: 0.416667rem;
                        color: #ff4751;
                        margin-right: 0.208333rem;
                    }

                    p {
                        margin-bottom: 0.416667rem;
                    }
                }
            }
        }

        .el-dialog__footer {
            display: flex;
            justify-content: center;

            .el-button {
                margin-bottom: 0.416667rem;
            }
        }
    }

    ::v-deep .el-icon-close:before {
        content: '\e68f';
        font-family: 'iconfont' !important;
        color: #babfcb;
    }

    .primaryInfo {
        display: flex;
        height: calc(70vh - 3rem);

        .infoLeft {
            padding-right: 0.833333rem;
            margin-right: 1.25rem;
            padding-bottom: 0.416667rem;
            border-right: 1px solid #32353a;

            .vedio {
                // max-width: 33.333333rem;
                background-color: #fff;
                min-width: 35rem;
                border-radius: 0.5rem;
                margin-top: 0.833333rem;
                margin-bottom: 0.833333rem;
                overflow: hidden;
            }

            .left_bottom_text {
                position: relative;
                width: 100%;
                height: 0.83rem;

                .preHidden {
                    visibility: hidden;
                }

                .nextBtn {
                    position: absolute;
                    right: 0;
                }
            }
        }

        .right {
            width: 100%;
            position: relative;

            .ProfileName {
                margin-top: 0.333333rem;
                margin-bottom: 1.25rem;

                .el-input__inner {
                    width: 100% !important;
                    border: 1px solid #dddddd;
                }
            }

            .el-button {
                width: 86px;
                height: 34px;
                border-radius: 6px;
                padding: 0;
                border: 1px solid #32353a;
                margin-top: 30px;
                bottom: 10px;
                position: relative;
            }

            .primary {
                background-color: #ff4751;
                color: #fff;
                border: none;
            }

            .btn {
                width: 100%;
                height: 34px;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 1.5rem;

                .primary {
                    margin-right: 1.25rem;
                }
            }

            .updataInfo {
                .updataText {
                    margin-bottom: 0.333333rem;
                }
            }

            .isLearnTrue {
                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }
            }

            .AllowDownTrue {
                margin-top: 1.25rem;

                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }
            }

            .learnRequireTrue {
                margin-top: 1.25rem;
                width: 100%;

                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }

                ::v-deep .ResourceTextarea {
                    resize: none !important;
                    width: 100%;

                    .el-textarea__inner {
                        border: 1px solid #dddddd;
                        height: 4.416667rem;
                    }
                }
            }

            .fileName {
                width: 100%;
            }

            ::v-deep .el-radio__inner {
                border: 1px solid #dddddd !important;
            }
        }
    }

    .primaryInfo {
        display: flex;
        height: calc(70vh - 3rem);

        .infoLeft {
            padding-right: 0.833333rem;
            margin-right: 1.25rem;
            padding-bottom: 0.416667rem;
            border-right: 1px solid #32353a;

            .vedio {
                // max-width: 33.333333rem;
                background-color: #fff;
                min-width: 35rem;
                border-radius: 0.5rem;
                margin-top: 0.833333rem;
                margin-bottom: 0.833333rem;
                overflow: hidden;
            }

            .left_bottom_text {
                position: relative;
                width: 100%;
                height: 0.83rem;

                .preHidden {
                    visibility: hidden;
                }

                .nextBtn {
                    position: absolute;
                    right: 0;
                }
            }
        }

        .right {
            width: 100%;
            position: relative;

            .ProfileName {
                margin-top: 0.333333rem;
                margin-bottom: 1.25rem;

                .el-input__inner {
                    width: 100% !important;
                    border: 1px solid #dddddd;
                }
            }

            .el-button {
                width: 86px;
                height: 34px;
                border-radius: 6px;
                padding: 0;
                border: 1px solid #32353a;
                margin-top: 30px;
                bottom: 10px;
                position: relative;
            }

            .primary {
                background-color: #ff4751;
                color: #fff;
                border: none;
            }

            .btn {
                width: 100%;
                height: 34px;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 1.5rem;

                .primary {
                    margin-right: 1.25rem;
                }
            }

            .updataInfo {
                .updataText {
                    margin-bottom: 0.333333rem;
                }
            }

            .isLearnTrue {
                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }
            }

            .AllowDownTrue {
                margin-top: 1.25rem;

                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }
            }

            .learnRequireTrue {
                margin-top: 1.25rem;
                width: 100%;

                .f-c-868EA1 {
                    margin-bottom: 0.333333rem;
                }

                ::v-deep .ResourceTextarea {
                    resize: none !important;
                    width: 100%;

                    .el-textarea__inner {
                        border: 1px solid #dddddd;
                        height: 4.416667rem;
                    }
                }
            }

            .fileName {
                width: 100%;
            }

            ::v-deep .el-radio__inner {
                border: 1px solid #dddddd !important;
            }
        }
    }
}
</style>
